<template>
  <FlowPanel class="layercontrol" :height="450" :width="320" :sty="Sty">
    <div slot="header" class="header">
      <span style="font-size: 16px;color: #333333; font-weight: bold; margin-left: 13px">图层控制</span>
      <i class="close" style="font-size: 17px;float:right;cursor: pointer" @click="close"></i>
    </div>
    <div style="height: calc(100% - 40px);overflow-y: auto">
      <div class="base-layer">
        <div
          class="item"
          :class="{active:index==ActiveBaseItem}"
          v-for="(item,index) in BaseItem"
          :style="item.bg"
          :key="item.id"
          @click="itemClick(item,index)"
        >
          <p>
            <span>{{item.name}}</span>
          </p>
        </div>
      </div>


      <div class="list-dynamic" style="margin-top: 10px">
        <div
          class="item layer"
          v-for="(item ,index) in currLayerItems "
          :key="index"
          style="margin:15px 0"
        >
          <p
            :title="item.name"
            style="width: 160px;display: inline-block;overflow: hidden;white-space:nowrap"
          >{{(item.name)}}</p>

          <p class="rtool">
            <img src="../assets/layercontrol/qingchu.png" class="ctrl" @click="ctrlLayer(item,'del')"/>
            <img
              v-if="index!=0"
              src="../assets/layercontrol/置顶.png"
              class="ctrl"
              @click="ctrlLayer(item,'queen')"
            />
            <img
              v-if="index!=0"
              src="../assets/layercontrol/上移.png"
              class="ctrl"
              @click="ctrlLayer(item,'up')"
            />
            <img
              v-if="index!=currLayerItems.length-1"
              src="../assets/layercontrol/下移.png"
              class="ctrl"
              @click="ctrlLayer(item,'down')"
            />
          </p>
          <div style="width: calc(100% - 15px)">
            <Slider v-model="item.opacity" @on-input="sliderChange(item,$event)"></Slider>
          </div>
        </div>
      </div>
    </div>


    <div style="position: absolute;bottom:0;width: 100%;height: 40px;background-color: rgba(255, 255, 255, 1)">
      <span
        @click="clear"
        style="display: block; width: 70px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #328BDD; border-radius: 15px; color: #328BDD; margin: 5px 0 5px 10px; cursor: pointer"
      >清空</span>
    </div>
  </FlowPanel>
</template>

<script>
  import {LayerCatetory, LayerType} from '@/js/LayerConstant';


  import FlowPanel from '@/components/panel2/FlowPanel';

  import img1 from '../assets/layercontrol/img.jpg';
  import img2 from '../assets/layercontrol/vec.jpg';
  import img3 from '../assets/layercontrol/ter.jpg';
  import img4 from '../assets/layercontrol/gimg.png';
  import img5 from '../assets/layercontrol/gvec.png';
  import img6 from '../assets/layercontrol/gter.png';

  import {getMenu} from '@/api/directory';
  import Layer from '@/js/earth/layer';

  export default {
    name: 'LayerControl',
    components: {
      FlowPanel
    },
    props: {
      sty: {
        type: Object,
        default: () => {
          return {
            right: '80px',
            bottom: '10px'
          };
        }
      }
    },
    data() {
      return {
        SWImgs: {
          open: require('../assets/layercontrol/btn_on.png'),
          close: require('../assets/layercontrol/btn_off.png')
        },
        BaseItem: [],
        ActiveBaseItem: 0,
      };
    },
    computed: {
      StaticLayer() {
        return [
          {
            id: 'boundary',
            name: '底图边界',
            icon: require('../assets/layercontrol/icon-ditu.png'),
            open: this.Properties.boundaryLayerShow
          },
          {
            id: 'label',
            name: '底图注记',
            icon: require('../assets/layercontrol/icon-zhuji.png'),
            open: this.Properties.labelLayerShow
          },
          {
            id: '3d',
            name: '三维全景',
            icon: require('../assets/layercontrol/icon-global.png'),
            open: false
          }
        ]
      },


      Sty() {
        let screenW = document.body.clientWidth;
        return {left: 400 + 'px', bottom: '60px'}//250:底部工具条宽度，110：submenu宽度，280：本身宽度
      }
    },
    created() {
      let imgArr = [img1, img2, img3, img4, img5, img6];
      let BaseLayers = window.CONFIG.BaseLayers;
      let a = 0;
      for (let i = 0; i < BaseLayers.length; i++) {
        if (a > 6) a = 0;
        let item = {
          name: BaseLayers[i].name,
          bg: {background: "url('" + imgArr[a] + "') "}
        };
        a++;
        this.BaseItem.push(item);
      }

      //初始化底图
      let baseLayerType = this.Properties.baseLayerType;
      this.changeBaseLayer(baseLayerType);
    },
    mounted() {
      this.listenAllEvent();
      this.getLayerData();
      this.addZqLayer();
      // this.addHxLayer();
      this.addZjLayer();
    },
    methods: {

      //切换底图
      changeBaseLayer(baseLayerType) {
        for (let i = 0; i < this.BaseItem.length; i++) {
          let item = this.BaseItem[i];
          if (item.name == baseLayerType) {
            this.ActiveBaseItem = i;
            break;
          }
        }
      },


      /**
       * 图层 移动与删除
       */
      ctrlLayer(data, action) {
        if (action == 'del') {
          // let obj = Object.assign({}, data, { checked: false }); //同步状态移到节点管理处理
          // this.mergeDirectoryItem(obj);
          this.mergeMenuData({...data, checked: false});
          this.$bus.$emit('removeLayer', data.id);
        } else {
          CLayer.adjustLayerIndex(viewer, data.id, action);
          this.getLayerData();
        }
      },

      /**
       *透明度调整
       */
      sliderChange(item) {
        let id = item.id;
        let lyrs = CLayer.getLayerByCondition(viewer, {id: id});

        if (lyrs.length > 0) {
          for (let i = 0; i < lyrs.length; i++) {
            let lyr = lyrs[i];
            if (lyr.flag && lyr.flag == 'label') {
              //不对注记层设置透明度
              continue;
            }
            let opacity = item.opacity;
            lyr.alpha = opacity / 100;
          }
        }
      },

      /**
       * 获取已加载的图层
       */
      getLayerData() {
        if (typeof viewer == 'undefined') {
          return;
        }

        let layerItems = [];

        let imageryLayers = viewer.imageryLayers;
        let imgLayers = imageryLayers._layers;
        //处理动态添加的图层
        for (let i = 0; i < imgLayers.length; i++) {
          let one = imgLayers[i];
          let data = one.data;
          let catalog = one.catalog;

          if (catalog && catalog == LayerCatetory.LIST) {
            //只处理 list类型图层
            let flag = one.flag;
            if (flag && flag == 'label') {
              //注记层不显示
              continue;
            }

            let showLabel = one.showLabel;
            let showLegend = one.showLegend;
            let index = imageryLayers.indexOf(one);
            layerItems.push({
              ...data,
              showTime: false,
              hasLabel: one.hasLabel,
              showLabel,
              showLegend,
              index,
              flag: flag,
              opacity: 100
            });
          }
        }

        // this.checkTopLayer();
        layerItems.descSort('index');
        if (layerItems.length > 0 && layerItems[0].layers && layerItems[0].layers.length > 1) {
          layerItems[0] = {...layerItems[0], showTime: true};
        }
        if (layerItems.length > 0) {
          layerItems[0] = {...layerItems[0], showLegend: true};
        }
        this.setCurrLayerItems(layerItems);
      },

      /**
       * 检查顶部图层
       */
      // checkTopLayer() {
      //   if (this.DynamicList.length > 0) {
      //     let top = this.DynamicList[0]; //顶部图层
      //     let data = top.data;   //数据在添加图层时已绑定到图层
      //     if (data && data.layers.length > 0) {
      //       let layers = data.layers;
      //       layers.ascSort('time');
      //       this.setLayerData(data);
      //       return true;
      //     }
      //   }
      //   this.setLayerData(null);
      // },

      clear() {
      },

      close() {
      }
    },
    watch: {
    },
    beforeDestroy() {
    }
  };
</script>

<style lang="postcss" scoped>
  .layercontrol {
    pointer-events: auto;
    display: inline-block;
    position: absolute;
    z-index: 1000;

    .header {
      background-color: #c3dffc;
    }

    .close {
      display: inline-block;
      width: 15px;
      height: 16px;
      background: url(../assets/layercontrol/btn_close.png) no-repeat center;
      margin-top: 12px;
      margin-right: 15px;
    }
  }

  .base-layer {
    padding: 10px 0;
    text-align: center;

    & .item {
      position: relative;
      display: inline-block;
      height: 60px;
      width: 80px;
      border: 2px solid #999999;
      border-radius: 5px;
      background-size: 100%;
      cursor: pointer;
      margin: 0 5px;

      & p {
        font-size: 12px;
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
        color: white;
        background-color: rgba(153, 153, 153, 0.4);

        & span {
          line-height: 1;
        }
      }
    }

    & .item:hover {
      border: 2px solid rgba(66, 165, 234, 1);
    }

    & .item.active {
      border: 2px solid rgba(66, 165, 234, 1);
    }
  }

  .list-static {
    & img {
      height: 16px;
    }
  }

  .list-dynamic {
    margin-left: 13px;
    margin-right: 10px;
  }

  .layer.item {
    position: relative;
    margin: 0 10px 8px 13px;

    & img {
      vertical-align: top;
      /* margin: 0 3px; */
      margin-right: 5px;
      height: 18px;
    }

    & img.ctrl {
      float: right;
      cursor: pointer;
    }

    & .rtool {
      height: 22px;
      position: absolute;
      top: 1px;
      right: 0;
      width: auto;
    }
  }
</style>
